Understanding Common JavaScript and React Native Errors

Course: React Native Training

Topic: Understanding Common JavaScript and React Native Errors

Course Link: React Native Training at JustAcademy

Demo Link: Register for a Course Demo

JustAcademy Website: Visit JustAcademy

1. Introduction to JavaScript and React Native Errors

JavaScript and React Native errors are problems that occur when an application executes code incorrectly, encounters unexpected data, fails to load a dependency, or interacts unsuccessfully with a device or external service. Understanding these errors is an essential skill for developing stable, secure, and maintainable mobile applications.

React Native uses JavaScript or TypeScript to implement application logic and React to build user interfaces. It also communicates with native Android and iOS capabilities. As a result, errors may originate in JavaScript code, React components, third-party packages, network requests, native modules, or the development environment.

Learning to interpret error messages, identify root causes, use debugging tools, and apply appropriate fixes helps developers solve problems efficiently instead of relying on trial and error.

1.1 What Is a JavaScript Error?

A JavaScript error occurs when code cannot execute as intended. It may result from invalid syntax, undefined variables, incorrect function calls, unexpected data types, or failed asynchronous operations.

For example:

const user = undefined;
console.log(user.name);

This code throws a TypeError because the application attempts to access the name property of undefined.

1.2 What Is a React Native Error?

A React Native error is a problem that occurs while developing, running, or building a React Native application. It can involve JavaScript execution, component rendering, navigation, package configuration, native code, permissions, or platform-specific behavior.

Examples include:

• Attempting to render an invalid React child.
• Importing a component from the wrong file path.
• Using a native module that is not installed or configured correctly.
• Accessing a property before API data has loaded.
• Using an unsupported or incompatible package version.
• Failing to request a required device permission.
• Encountering an Android build or iOS compilation error.

1.3 Why Understanding Errors Is Important

• Faster debugging: Helps locate the actual source of a problem.
• Improved stability: Reduces crashes and unexpected behavior.
• Better user experience: Prevents broken screens and confusing error states.
• Reduced development time: Avoids repeated, ineffective troubleshooting.
• Improved code quality: Encourages proper validation and error handling.
• Reliable releases: Helps identify platform-specific problems before deployment.

1.4 Learning Objectives

• Understand common JavaScript error categories.
• Recognize frequently encountered React and React Native errors.
• Interpret stack traces and error messages.
• Debug undefined values, invalid imports, and rendering failures.
• Handle API, Promise, and asynchronous errors.
• Understand common navigation, native-module, and build errors.
• Use debugging tools and logs effectively.
• Apply preventive coding practices and structured troubleshooting.

2. Understanding the Main Categories of Errors

Identifying the type of error is the first step toward fixing it. Different categories require different debugging strategies.

2.1 Syntax Errors

Syntax errors occur when JavaScript cannot parse the source code. Common causes include missing brackets, unmatched parentheses, unterminated strings, and incorrectly written object literals.

// Incorrect
const user = {
  name: "Alex",
  age: 25

// Correct
const user = {
  name: "Alex",
  age: 25
};

How to fix: Review the line identified by the parser, check nearby brackets and parentheses, and use an editor with syntax highlighting and linting.

2.2 Reference Errors

A reference error commonly occurs when code uses a variable or function that is not defined in the current scope.

console.log(userName);

If userName has not been declared in an accessible scope, JavaScript may throw a ReferenceError.

How to fix: Verify the identifier's spelling, declaration, scope, and import. Check whether the value is defined before it is used.

2.3 Type Errors

A type error occurs when an operation cannot be performed on a particular value.

const name = null;
console.log(name.toUpperCase());

This throws a TypeError because null does not have a toUpperCase() method.

How to fix: Validate the value before using it, ensure the expected data type is correct, and handle missing values explicitly.

2.4 Logic Errors

A logic error occurs when the code runs without necessarily throwing an exception but produces the wrong result.

// Incorrect discount calculation
const finalPrice = price - discount / 100;

// Correct percentage discount calculation
const finalPrice = price - (price * discount / 100);

How to fix: Verify the formula, inspect input values, create unit tests, and check boundary conditions.

3. Common JavaScript Errors

3.1 Cannot Read Properties of Undefined

This error occurs when code attempts to access a property on a value that is currently undefined.

const user = undefined;
console.log(user.name);

Possible causes:

• API data has not loaded yet.
• A property does not exist in the returned object.
• A function returns no value.
• An object has not been initialized.
• The application assumes data is always available.

Solution: Validate the value or use optional chaining when missing data is an expected possibility.

const userName = user?.name ?? "Guest";
console.log(userName);

Optional chaining prevents property access when the left-hand value is nullish. The nullish coalescing operator supplies a fallback only when the result is null or undefined.

3.2 Cannot Read Properties of Null

This error is similar to accessing an undefined value, but the object is explicitly null.

const profile = null;
console.log(profile.email);

Solution:

const email = profile?.email ?? "No email available";

Optional chaining is useful when the missing object is legitimate. It should not be used to hide a programming mistake that requires the object to exist.

3.3 Is Not a Function

This error occurs when code attempts to call a value as a function even though the value is not callable.

const user = {
  name: "Alex"
};

user.name();

Cause: The name property contains a string, not a function.

Solution: Check the intended operation and verify the type of the value before calling it.

console.log(user.name);

3.4 Assignment to a Constant Variable

A variable declared using const cannot be reassigned.

const count = 10;
count = 20;

Solution: Use let when reassignment is required, or keep the binding constant if the value should not be reassigned.

let count = 10;
count = 20;

Remember that const prevents reassignment of the binding, not mutation of every object stored in that binding.

3.5 Unexpected Token

An unexpected token error usually indicates invalid syntax or code that cannot be parsed in its current context.

// Incorrect
const message = "Hello;

// Correct
const message = "Hello";

Solution: Inspect quotes, commas, brackets, operators, and JSX syntax around the reported location. The actual mistake may appear on a preceding line.

3.6 Variable Is Not Defined

Using an undeclared variable causes a reference error in ordinary JavaScript execution.

function showMessage() {
  console.log(message);
}

showMessage();

Solution: Declare the variable in the correct scope, pass it as a function argument, or import it from the appropriate module.

3.7 Invalid Array Operations

Array-related errors often occur when code assumes that a variable is an array even though it contains a different value.

const users = null;
users.map(user => user.name);

Solution: Validate the data shape and initialize collections with suitable defaults when appropriate.

const users = [];
const names = users.map(user => user.name);

For external data, validate the response before treating it as an array rather than assuming every response has the expected structure.

3.8 JSON Parsing Errors

JSON parsing fails when the input is not valid JSON.

const data = JSON.parse("{name: Alex}");

The string is not valid JSON because the property name and string value are not quoted correctly.

const data = JSON.parse('{"name":"Alex"}');

When parsing untrusted or external input, use appropriate error handling to prevent invalid data from crashing the surrounding operation.

4. Common React Errors

React Native uses React's component model, state management, rendering rules, and Hooks. Many React errors therefore appear in React Native applications as well.

4.1 Invalid React Child

React cannot directly render arbitrary JavaScript objects as children. For example, an object containing user information must not be rendered directly inside a text or view component.

// Incorrect
const user = { name: "Alex" };

return (
  <Text>{user}</Text>
);

Correct approach: Render a supported value or an appropriate representation of the object.

return (
  <Text>{user.name}</Text>
);

In React Native, visible text should generally be placed inside Text components rather than inserted directly as text children of a View.

4.2 Invalid Hook Call

React Hooks must follow the Rules of Hooks. They should be called at the top level of a function component or a custom Hook, not conditionally or inside ordinary nested functions.

// Incorrect
function ProfileScreen({ isLoggedIn }) {
  if (isLoggedIn) {
    const [name, setName] = useState("");
  }

  return null;
}

Correct approach:

function ProfileScreen({ isLoggedIn }) {
  const [name, setName] = useState("");

  if (!isLoggedIn) {
    return null;
  }

  return <Text>{name}</Text>;
}

The Hook is now called unconditionally at the top level. Other causes of invalid Hook call errors include mismatched React and renderer versions or multiple incompatible React instances.

4.3 Too Many Re-Renders

This error occurs when rendering repeatedly triggers state updates, creating an endless render loop.

// Incorrect
function Counter() {
  const [count, setCount] = useState(0);

  setCount(count + 1);

  return <Text>{count}</Text>;
}

Solution: Perform state updates in event handlers or effects with appropriate conditions and dependencies.

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>{count}</Text>
      <Button
        title="Increase"
        onPress={() => setCount(previous => previous + 1)}
      />
    </View>
  );
}

4.4 Missing or Duplicate List Keys

React uses keys to identify list items across renders. Missing or duplicate keys can produce warnings and cause incorrect item identity during updates.

// Incorrect
{users.map(user => (
  <Text>{user.name}</Text>
))}

Correct approach:

{users.map(user => (
  <Text key={user.id}>{user.name}</Text>
))}

Use a stable, unique identifier whenever possible. Avoid array indexes as keys when items can be inserted, removed, or reordered.

4.5 State Does Not Update Immediately

React state updates are scheduled rather than acting like immediate assignments to a normal variable. Reading the state variable immediately after calling its setter generally returns the value from the current render.

const [count, setCount] = useState(0);

function increaseCount() {
  setCount(count + 1);
  console.log(count);
}

The log may show the previous value because the current handler still sees the state from its render.

Solution: Use a functional state update when the next value depends on the previous value.

setCount(previous => previous + 1);

To observe a value after React commits an update, use an effect when that behavior is genuinely required.

4.6 Missing Dependency in useEffect

An effect may use stale values or fail to resynchronize if reactive dependencies are omitted.

useEffect(() => {
  console.log(userId);
}, []);

If the effect must respond to changes in userId, include it in the dependency array.

useEffect(() => {
  console.log(userId);
}, [userId]);

Follow the React Hooks lint rules and ensure that dependencies match the effect's actual requirements.

4.7 Missing Return Statement in a Component

A component may display nothing when it does not return the intended JSX.

// Incorrect
function WelcomeScreen() {
  <Text>Welcome</Text>;
}

Correct approach:

function WelcomeScreen() {
  return <Text>Welcome</Text>;
}

Check that the component returns valid JSX and that conditional branches return the intended output.

5. Common React Native Rendering Errors

React Native rendering errors occur when a component returns invalid content, uses an unsupported component structure, or attempts to display data in an incorrect way.

5.1 Text Strings Must Be Rendered Within a Text Component

In React Native, visible text should normally be placed inside a Text component. Placing raw text directly inside a View can cause an error.

// Incorrect
return (
  <View>
    Hello World
  </View>
);

// Correct
return (
  <View>
    <Text>Hello World</Text>
  </View>
);

5.2 Invalid Component Import

An incorrect import can result in an invalid component type error when React attempts to render the component.

// Incorrect if the module has no default export
import ProfileScreen from "./ProfileScreen";

// Correct for a named export
import { ProfileScreen } from "./ProfileScreen";

Check whether the component uses a default export or a named export. Also verify the filename, directory, and capitalization of the import path.

5.3 Component Is Not Exported Correctly

// ProfileScreen.js
export default function ProfileScreen() {
  return <Text>Profile</Text>;
}

For the component above, import it using the default import syntax:

import ProfileScreen from "./ProfileScreen";

5.4 Conditional Rendering Errors

JavaScript expressions used for conditional rendering can produce unexpected values. For example, using a number directly with the logical AND operator may display that number when the condition is false.

// May render 0 when items.length is zero
{items.length && <Text>Items available</Text>}

A safer approach is to use an explicit Boolean condition.

{items.length > 0 ? (
  <Text>Items available</Text>
) : null}

5.5 Invalid FlatList Data

FlatList expects an array of data. Passing null or an object instead of an array may cause unexpected behavior.

// Safe initialization
const [products, setProducts] = useState([]);

When receiving external data, verify that it has the expected structure before passing it to FlatList.

<FlatList
  data={Array.isArray(products) ? products : []}
  keyExtractor={item => String(item.id)}
  renderItem={({ item }) => (
    <Text>{item.name}</Text>
  )}
/>

6. Common State and Props Errors

6.1 Forgetting to Pass Props

A component may expect a prop that its parent does not provide.

function UserCard({ user }) {
  return <Text>{user.name}</Text>;
}

If the parent renders UserCard without the required user object, accessing user.name may throw an error.

Solution: Pass the required prop, validate it, or provide a suitable default where appropriate.

function UserCard({ user }) {
  if (!user) {
    return <Text>User information unavailable</Text>;
  }

  return <Text>{user.name}</Text>;
}

6.2 Mutating State Directly

React state should be updated through its setter rather than by directly mutating an existing array or object. Direct mutation can prevent expected updates and make application behavior difficult to predict.

// Incorrect
items.push(newItem);
setItems(items);

// Correct
setItems(previousItems => [
  ...previousItems,
  newItem
]);

For objects, create a new object with the required changes:

setUser(previousUser => ({
  ...previousUser,
  name: "Alex"
}));

6.3 Incorrect State Initialization

State should be initialized with a value that matches the operations performed on it.

// Incorrect if the code immediately calls map()
const [items, setItems] = useState(null);

// Better
const [items, setItems] = useState([]);

Use an initial value that reflects the component's data model. If null represents a meaningful loading or missing state, handle it explicitly.

6.4 Updating State Based on a Stale Value

When several updates depend on the previous state, using the current render's value repeatedly can produce unexpected results.

// Potentially incorrect for multiple queued updates
setCount(count + 1);
setCount(count + 1);

// Preferred when each update depends on the previous value
setCount(previous => previous + 1);
setCount(previous => previous + 1);

The functional updater ensures that each update calculates its result from the latest queued state.

7. Common useEffect and Lifecycle Errors

7.1 Infinite Effect Loops

An effect can create a loop when it updates a dependency on every execution without a condition that allows the updates to settle.

// Incorrect pattern
useEffect(() => {
  setCount(count + 1);
}, [count]);

Every change to count triggers the effect again, which changes count again.

Solution: Move the update to an event handler if it should occur in response to a user action. If the update belongs in an effect, define a clear synchronization condition.

7.2 Missing Cleanup Functions

Timers, subscriptions, and event listeners may continue running after an effect is no longer needed if they are not cleaned up.

useEffect(() => {
  const timerId = setInterval(() => {
    console.log("Timer running");
  }, 1000);

  return () => {
    clearInterval(timerId);
  };
}, []);

Cleanup releases the timer when the effect is cleaned up. The same principle applies to subscriptions, supported network requests, and other external resources.

7.3 Incorrect Dependency Arrays

Leaving out a dependency can cause an effect to use an outdated value. Adding unstable dependencies can also cause an effect to rerun unnecessarily.

Use the React Hooks lint rules to identify missing dependencies, and restructure effects when necessary rather than suppressing dependency warnings.

7.4 Setting State After an Async Operation Becomes Obsolete

An asynchronous request may finish after the component no longer needs its result. Cancel the request when supported, or prevent stale results from being applied.

useEffect(() => {
  const controller = new AbortController();

  async function loadData() {
    try {
      const response = await fetch(
        "https://example.com/api/data",
        { signal: controller.signal }
      );

      if (!response.ok) {
        throw new Error("Request failed");
      }

      const result = await response.json();
      setData(result);
    } catch (error) {
      if (error.name !== "AbortError") {
        setError(error.message);
      }
    }
  }

  loadData();

  return () => controller.abort();
}, []);

For production use, ensure the component defines and handles its error state appropriately. The server URL here is an example and must be replaced with the application's actual endpoint.

8. Common API and Network Errors

React Native applications often depend on remote APIs for authentication, user profiles, product listings, and other data. Network failures must be handled separately from JavaScript syntax and rendering problems.

8.1 Fetch Does Not Automatically Reject for HTTP Error Statuses

A common mistake is assuming that fetch() throws an exception whenever a server returns an HTTP error such as 404 or 500. A fetch request generally resolves with a response for HTTP error statuses, so the application should check response.ok.

async function getUsers() {
  const response = await fetch(
    "https://example.com/api/users"
  );

  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`);
  }

  return response.json();
}

8.2 Network Request Failures

A request may fail because of unavailable connectivity, DNS problems, server downtime, TLS configuration issues, or other transport errors.

async function loadUsers() {
  try {
    const users = await getUsers();
    setUsers(users);
  } catch (error) {
    setError("Unable to load users. Please try again.");
  }
}

Use meaningful error messages for users and preserve diagnostic details in development logs. Avoid exposing sensitive server responses or internal implementation details in the interface.

8.3 JSON Response Errors

A server may return malformed JSON, an empty body, or a response format different from what the application expects.

Solution: Verify the endpoint, response status, content type, and response structure. Handle parsing failures and validate data before using it.

8.4 CORS Confusion

Cross-Origin Resource Sharing (CORS) is primarily a browser security mechanism. Standard React Native networking does not behave exactly like browser-based web applications. If a request fails in React Native, investigate the actual network error, endpoint, server configuration, TLS requirements, and platform-specific networking behavior rather than assuming that a browser CORS restriction is responsible.

8.5 Invalid API Data

An API can return a successful response with unexpected or incomplete data.

const result = await response.json();

if (!Array.isArray(result.users)) {
  throw new Error("Unexpected API response format");
}

setUsers(result.users);

Data validation prevents the interface from failing later when it attempts to use a missing field or call an array method on an incompatible value.

9. Common Navigation Errors

Navigation problems may occur when routes are not registered, incorrect parameters are passed, or navigation actions use a name that does not exist.

9.1 The Action Navigate Was Not Handled

This type of message commonly indicates that the requested navigation action could not be handled by the current navigation tree.

Possible causes:

• The screen name is incorrect.
• The destination screen is not registered in the navigator.
• The navigation action is being dispatched from the wrong navigator.
• A nested navigator requires a different navigation target.

Solution: Verify the screen registration, route name, nesting structure, and navigation configuration.

<Stack.Screen
  name="Profile"
  component={ProfileScreen}
/>

Navigate using the registered route name:

navigation.navigate("Profile");

9.2 Missing Route Parameters

A destination screen may expect a parameter that was not provided.

navigation.navigate("Profile", {
  userId: "123"
});

On the destination screen, verify the parameter before using it:

function ProfileScreen({ route }) {
  const userId = route?.params?.userId;

  if (!userId) {
    return <Text>User ID is unavailable</Text>;
  }

  return <Text>User ID: {userId}</Text>;
}

TypeScript route definitions can help detect incorrect parameter names and types during development.

9.3 Using Navigation Outside the Expected Context

A navigation hook may fail when used outside the relevant navigation context. Ensure that the component is rendered within the configured navigator and that the correct navigation API is being used.

10. Common Package and Import Errors

10.1 Unable to Resolve Module

This error means that the bundler cannot locate a requested module or file.

import Header from "./components/Header";

Possible causes:

• The file does not exist at the specified location.
• The relative path is incorrect.
• The filename's capitalization differs from the import.
• A dependency has not been installed.
• The package's exports do not match the import statement.

Solution: Check the directory structure, exact filename, export style, and dependency installation.

10.2 Default Export Versus Named Export

// Named export
export function Header() {
  return <Text>Header</Text>;
}

// Correct named import
import { Header } from "./Header";

For a default export, use an import without braces:

// Header.js
export default function Header() {
  return <Text>Header</Text>;
}

// Import
import Header from "./Header";

10.3 Incompatible Dependency Versions

React Native libraries may require particular versions of React Native, React, Android Gradle Plugin, Kotlin, or other dependencies. An incompatible package can cause bundling errors, native compilation failures, or runtime crashes.

Solution: Review the library's compatibility requirements and use package versions supported by the project's React Native version. Avoid upgrading several unrelated dependencies at once when investigating a failure.

10.4 Metro Bundler Cache Problems

Metro is the JavaScript bundler used by React Native. After dependency or configuration changes, stale cached data may occasionally contribute to confusing bundling behavior.

You can restart Metro and reset its cache when there is evidence that stale bundler state is involved:

npx react-native start --reset-cache

This command resets Metro's cache; it does not repair incorrect source code, incompatible dependencies, or native build configuration.

11. Common Native Module and Platform Errors

React Native applications run JavaScript alongside native Android and iOS code. Some features rely on native modules for camera access, notifications, storage, location, Bluetooth, and other device capabilities.

11.1 Native Module Is Null or Unavailable

An error indicating that a native module is unavailable may mean that the JavaScript package exists but its native implementation has not been linked, built, registered, or initialized correctly.

Possible solutions:

• Verify that the package supports the installed React Native version.
• Follow the package's installation instructions.
• Rebuild the native application after installing a native dependency.
• Check Android and iOS configuration requirements.
• Review native logs for initialization failures.

Restarting Metro alone may not be sufficient because native dependency changes often require a new native build.

11.2 Permission Errors

Features such as location, camera, microphone, and notifications may require platform-specific permission declarations and runtime permission requests.

Solution: Check the platform requirements, request permission at the appropriate time, and handle denied or restricted permissions gracefully.

11.3 Android Build Errors

Android build failures may originate from Gradle configuration, Java or Kotlin compatibility, SDK versions, dependency conflicts, or native module compilation.

Investigate the first meaningful compilation error in the build output instead of focusing only on the final generic build-failed message.

11.4 iOS Build Errors

iOS build failures may involve Xcode settings, CocoaPods, deployment targets, Swift or Objective-C compilation, signing configuration, or incompatible native dependencies.

Review the failing target and the first actionable error in Xcode's build output. Check the affected package's installation requirements before changing project-wide configuration.

11.5 Platform-Specific Behavior

An application may work on Android but fail on iOS, or vice versa, because the operating systems use different native APIs, permissions, layouts, and behavior.

• Test platform-specific code on both supported platforms.
• Use Platform.OS when different logic is genuinely required.
• Check device permissions and platform configuration.
• Review native logs when JavaScript logs do not explain the failure.

12. Common Build and Development Environment Errors

12.1 Development Server Not Running

The application may fail to load its JavaScript bundle when Metro is not running or the device cannot connect to the development server.

Solution: Start Metro, verify the development connection, and check that the device or emulator can reach the server.

npx react-native start

12.2 Port Already in Use

A port conflict may occur if another process is already using the development server's port.

Solution: Identify the process using the port and stop it safely, or configure the development server to use another supported port.

12.3 Dependency Installation Problems

Missing packages, inconsistent lockfiles, or incompatible versions can prevent the project from starting or building.

Solution: Review the package manager's error output, verify the project's Node.js requirements, and install dependencies using the repository's existing lockfile and package manager.

12.4 Environment Variable Errors

An application may fail when a required API endpoint or configuration value is missing.

const apiUrl = process.env.API_URL;

if (!apiUrl) {
  throw new Error("API_URL is not configured");
}

The exact environment-variable mechanism depends on the React Native toolchain and project setup. Do not assume that browser-style environment variables are automatically available in every React Native application.

Never place private server credentials, secret API keys, or sensitive access tokens in client-side application code or public build configuration.

13. Understanding Error Messages and Stack Traces

An error message describes what went wrong, while a stack trace helps identify the sequence of function calls that led to the failure.

13.1 Example Error Message

TypeError: Cannot read property 'name' of undefined

This message suggests that the application attempted to access the name property of a value that was undefined.

13.2 Understanding a Stack Trace

A stack trace may contain:

• The error type and message.
• The file where the error occurred.
• The line and column number.
• The function containing the failing operation.
• The sequence of calls that led to the failure.

Start with the first relevant frame that points to your application code. Framework internals may appear below it because React Native calls your code through multiple layers.

13.3 A Structured Error Investigation

1. Read the complete error message.
2. Identify the error category.
3. Open the source file and line mentioned in the stack trace.
4. Inspect the values involved in the failing operation.
5. Trace the data back to where it was created or received.
6. Reproduce the issue using the same user actions or input.
7. Implement a focused correction.
8. Retest the original scenario and related edge cases.

13.4 Do Not Fix Only the Visible Symptom

Adding optional chaining everywhere may prevent certain exceptions, but it does not necessarily correct the underlying problem. If a user object must always exist, investigate why it is missing rather than silently displaying incomplete information.

A good fix addresses the actual cause and provides appropriate handling for genuinely optional or unavailable data.

14. Debugging Tools in React Native

React Native includes development tools for inspecting JavaScript execution, displaying errors, examining components, and investigating performance. The exact features available depend on the React Native version and JavaScript engine.

14.1 React Native DevTools

React Native DevTools provides debugging capabilities for React Native applications using supported configurations.

Important features include:

• Console: View logs, inspect values, and investigate JavaScript errors.
• Sources: Inspect source code and use breakpoints.
• Components: Inspect the React component tree, props, and state.
• Profiler: Investigate rendering performance.
• Network tools: Inspect supported network activity in compatible versions.

Use the Dev Menu to open DevTools when supported by your React Native version. Consult the official documentation for version-specific setup and limitations.

14.2 LogBox

LogBox displays JavaScript errors and warnings in the development application. It can help identify problems while interacting with the app.

Use it to inspect the error details and locate the relevant source. Avoid hiding warnings merely to make the screen look clean; resolve the underlying problem whenever possible.

14.3 Console Logging

Logging helps inspect the values passed between functions and identify where unexpected data appears.

console.log("User data:", user);
console.warn("Unexpected input:", input);
console.error("Failed to load profile:", error);

Use logs strategically. Avoid printing passwords, access tokens, personal information, or other sensitive data.

14.4 Breakpoints and the Debugger

A breakpoint pauses execution at a selected line so developers can inspect variable values, call stacks, and control flow.

function calculateTotal(price, quantity) {
  debugger;

  return price * quantity;
}

When the debugger is attached and execution reaches this statement, it can pause and allow inspection. Remove unnecessary debugger statements before production releases.

14.5 Android Studio and Xcode

Use native development tools when an issue originates in platform code, native module initialization, device permissions, or native crashes.

• Android Studio Logcat helps inspect Android logs.
• Android Studio's debugger helps investigate native Android code.
• Xcode's console and debugger help investigate iOS runtime issues.
• Native build output helps identify compilation and linking failures.

React Native DevTools is intended for React and JavaScript debugging; it does not replace the native tools needed to investigate underlying Android or iOS code. Read the official React Native debugging documentation for additional guidance.

15. Error Handling with try...catch

The try...catch statement allows an application to handle exceptions and provide a controlled response instead of allowing a synchronous error to propagate unexpectedly.

15.1 Basic Syntax

try {
  const result = performOperation();
  console.log(result);
} catch (error) {
  console.error("Operation failed:", error);
}

15.2 Handling JSON Parsing Errors

function parseUserData(jsonString) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error("Invalid JSON:", error);
    return null;
  }
}

This example returns null if parsing fails. In production, choose a return value or error strategy that clearly communicates failure to the caller.

15.3 Handling Async/Await Errors

async function loadProfile() {
  try {
    const response = await fetch(
      "https://example.com/api/profile"
    );

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    console.error("Profile request failed:", error);
    throw error;
  }
}

Rethrowing the error allows the calling function to decide how to display or recover from the failure. Alternatively, a function may return a structured result when that is part of its intended API.

15.4 Important Limitations of try...catch

• It catches exceptions thrown inside its synchronous block.
• It catches rejected Promises that are awaited inside the block.
• It does not automatically catch every error that occurs later in an unrelated asynchronous callback.
• It does not automatically catch all rendering errors in React components.
• It does not replace validation or appropriate cleanup.

16. Error Boundaries in React Native

Error boundaries are React components that can catch certain errors thrown while rendering descendant components, during their constructors, and in lifecycle methods. They allow the application to display a fallback interface instead of losing the entire affected component subtree.

16.1 Basic Error Boundary

import React from "react";
import { Button, Text, View } from "react-native";

export class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      hasError: false
    };
  }

  static getDerivedStateFromError() {
    return {
      hasError: true
    };
  }

  componentDidCatch(error, info) {
    console.error("Component error:", error, info);
  }

  render() {
    if (this.state.hasError) {
      return (
        <View>
          <Text>Something went wrong.</Text>
          <Button
            title="Try Again"
            onPress={() => {
              this.setState({ hasError: false });
            }}
          />
        </View>
      );
    }

    return this.props.children;
  }
}

16.2 Using an Error Boundary

function App() {
  return (
    <ErrorBoundary>
      <ProfileScreen />
    </ErrorBoundary>
  );
}

The boundary displays a fallback interface when a qualifying error occurs in its descendant tree. Resetting the boundary state does not automatically repair the underlying problem, so a real retry mechanism may need to reset failed data, remount a component, or repeat a request.

16.3 What Error Boundaries Do Not Catch

• Errors inside ordinary event handlers.
• Errors from asynchronous callbacks such as unrelated timer callbacks.
• Errors thrown in server-side rendering.
• Errors thrown by the error boundary itself.

Use explicit error handling for event handlers and asynchronous operations. Error boundaries complement that handling rather than replacing it.

17. Common Error Messages and Their Solutions

18. Step-by-Step Troubleshooting Workflow

A structured debugging process helps developers identify root causes efficiently and avoid unnecessary changes.

Step 1: Reproduce the Error

Repeat the user actions or inputs that trigger the issue. Record whether it occurs consistently or only under particular conditions.

Step 2: Read the Complete Error Message

Identify the error type, relevant source file, line number, and stack trace. Do not rely only on a shortened notification.

Step 3: Identify the Error Category

Determine whether the problem relates to JavaScript, rendering, asynchronous operations, navigation, dependencies, or native code.

Step 4: Inspect the Relevant Code

Review the statement that failed and the surrounding logic. Check input values, object structures, state, props, and function arguments.

Step 5: Trace the Root Cause

Follow the value or operation back to its origin. If an object is undefined, investigate where it should have been initialized or received rather than only patching the final property access.

Step 6: Apply a Focused Fix

Correct the relevant logic, validate input, update dependencies, handle failures, or adjust native configuration as appropriate.

Step 7: Verify the Fix

Repeat the original steps and confirm that the error no longer occurs. Test nearby scenarios and edge cases that could trigger the same problem.

Step 8: Add a Regression Test

When practical, add an automated test that verifies the corrected behavior and helps prevent the same defect from returning.

19. Best Practices for Preventing Common Errors

19.1 Use TypeScript Where Appropriate

TypeScript can catch many incorrect property accesses, incompatible function arguments, and type mismatches before runtime. It cannot eliminate every runtime error, particularly when working with unvalidated external data.

19.2 Validate External Data

API responses, navigation parameters, user input, and local storage values should be checked before being used in operations that assume a particular structure.

19.3 Use ESLint and React Hooks Rules

Linting helps identify potential defects, inconsistent patterns, and incorrect Hook usage. Keep lint rules enabled and review warnings rather than automatically suppressing them.

19.4 Write Unit and Component Tests

Tests can catch problems involving calculations, conditional rendering, missing values, invalid inputs, and unexpected asynchronous responses before release.

19.5 Handle Errors at the Correct Level

Use local error states for expected failures such as a rejected API request, error boundaries for qualifying component rendering failures, and native debugging tools for platform-level crashes.

19.6 Keep Dependencies Compatible

Check the supported React Native version, native requirements, and installation steps before adding or upgrading a package.

19.7 Avoid Hiding Errors

Do not ignore warnings or disable diagnostic tools simply to make development output appear clean. Suppress a specific known warning only when justified, and track the underlying issue for resolution.

19.8 Test on Android and iOS

When supporting both platforms, verify important workflows on each platform. Platform differences may expose errors that do not occur in a single emulator or simulator.

19.9 Keep Logs Safe

Logs should provide useful debugging information without exposing passwords, authentication tokens, personal information, or confidential configuration values.

20. Practical Project: Build an Error-Resistant User Profile Screen

This project demonstrates data validation, loading states, error handling, and safe rendering in a React Native screen.

20.1 Project Requirements

• Display a loading message while the profile is being fetched.
• Show the user's name when valid data is received.
• Handle failed network requests.
• Check the HTTP response status before parsing data.
• Provide a retry button after a failed request.
• Prevent obsolete requests from updating the screen after cleanup.

20.2 Complete Implementation

import React, { useCallback, useEffect, useState } from "react";
import { ActivityIndicator, Button, Text, View } from "react-native";

const API_URL = "https://example.com/api/profile";

export default function UserProfileScreen() {
  const [profile, setProfile] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [retryCount, setRetryCount] = useState(0);

  const retry = useCallback(() => {
    setRetryCount(previous => previous + 1);
  }, []);

  useEffect(() => {
    const controller = new AbortController();
    let active = true;

    async function loadProfile() {
      setLoading(true);
      setError("");

      try {
        const response = await fetch(API_URL, {
          signal: controller.signal
        });

        if (!response.ok) {
          throw new Error(`HTTP error: ${response.status}`);
        }

        const data = await response.json();

        if (!data || typeof data.name !== "string") {
          throw new Error("Invalid profile response");
        }

        if (active) {
          setProfile(data);
        }
      } catch (err) {
        if (active && err.name !== "AbortError") {
          setError("Unable to load the profile.");
        }
      } finally {
        if (active) {
          setLoading(false);
        }
      }
    }

    loadProfile();

    return () => {
      active = false;
      controller.abort();
    };
  }, [retryCount]);

  if (loading) {
    return (
      <View>
        <ActivityIndicator />
        <Text>Loading profile...</Text>
      </View>
    );
  }

  if (error) {
    return (
      <View>
        <Text>{error}</Text>
        <Button title="Try Again" onPress={retry} />
      </View>
    );
  }

  return (
    <View>
      <Text>Profile</Text>
      <Text>Name: {profile?.name ?? "Unavailable"}</Text>
    </View>
  );
}

Important: Replace the example API endpoint with a real endpoint that returns a profile object. The request and response format must match the actual service.

20.3 How the Project Works

1. The component initially displays a loading indicator.
2. The effect starts an API request.
3. The application checks the HTTP status before processing the response.
4. The response is validated before its name is rendered.
5. Network failures and invalid responses produce a controlled error state.
6. The retry button triggers a new effect execution.
7. Cleanup aborts the request and prevents obsolete results from updating the component.

20.4 Suggested Improvements

• Add a unit test for profile-response validation.
• Mock the API to test success, failure, and invalid response scenarios.
• Add a timeout or retry policy appropriate for the service.
• Display a more specific user-facing message when it is safe and useful.
• Use a runtime schema validator when the response structure is complex.
• Test the screen on Android and iOS.

21. Interview Questions and Answers

Q1. What is the difference between a syntax error and a runtime error?

A syntax error prevents the code from being parsed correctly. A runtime error occurs while executing code that has already been parsed.

Q2. What causes a TypeError in JavaScript?

A TypeError occurs when an operation is invalid for the value's type, such as calling a string as a function or accessing a property on null.

Q3. How do you handle undefined values?

Investigate why the value is missing, validate the data, and use optional chaining or default values when missing data is an expected condition.

Q4. What causes an invalid Hook call?

Common causes include calling Hooks conditionally, calling them outside a function component or custom Hook, and incompatible React installations.

Q5. Why does React report too many re-renders?

This commonly occurs when a component triggers state updates during rendering or enters an effect-driven update loop.

Q6. How do you fix missing key warnings?

Provide a stable and unique key for each rendered list item, preferably using a unique identifier from the data.

Q7. Why does fetch not always throw on an HTTP error?

Fetch generally resolves for HTTP error statuses. Check response.ok or the status code and handle unsuccessful responses explicitly.

Q8. What is the purpose of an error boundary?

An error boundary provides fallback UI for qualifying errors in descendant component rendering and related React lifecycle processing.

Q9. How do you debug a native module error?

Check package compatibility, native installation requirements, rebuild requirements, platform configuration, and native logs in Android Studio or Xcode.

Q10. What is Metro in React Native?

Metro is the JavaScript bundler used by React Native to process and serve application code during development and to support bundling workflows.

Q11. How do you debug an API error?

Inspect the endpoint, request parameters, network connectivity, HTTP status, response body, and parsing logic. Handle failures with appropriate error states.

Q12. What is the difference between a warning and an error?

A warning highlights a potential issue or undesirable pattern. An error indicates that an operation has failed or the application cannot continue normally in the affected context. Some warnings may still reveal serious defects.

Q13. Why should state not be mutated directly?

Direct mutation can prevent React from recognizing expected changes and can create unpredictable behavior. Use the state setter and immutable update patterns.

Q14. How do you prevent infinite useEffect loops?

Understand the effect's dependencies, avoid unnecessary state updates, and ensure the effect synchronizes with external systems instead of repeatedly changing its own dependencies without a stopping condition.

Q15. What is the best way to debug a React Native application?

Reproduce the issue, inspect the full error message and stack trace, use React Native DevTools for JavaScript and React issues, use native tools for platform failures, fix the root cause, and retest.

22. Practice Exercises

1. Write a function that safely handles an undefined user object.
2. Correct a syntax error caused by missing brackets or quotes.
3. Build a component that handles an empty array and displays an appropriate message.
4. Fix a component that causes too many re-renders.
5. Correct a missing-key warning in a FlatList or mapped list.
6. Create an effect with correct dependencies and cleanup.
7. Handle a rejected API request and display an error message.
8. Validate an API response before rendering its fields.
9. Correct an import error caused by a named and default export mismatch.
10. Configure an error boundary around a screen or component subtree.
11. Investigate a simulated Metro module-resolution error.
12. Prepare a debugging checklist for an Android-only or iOS-only crash.

23. Quick Revision Checklist

• Understand syntax, reference, type, runtime, and logic errors.
• Check whether variables and properties exist before using them.
• Follow React's Rules of Hooks.
• Avoid state updates during rendering.
• Use stable keys for lists.
• Render valid content using appropriate React Native components.
• Keep state updates immutable.
• Use correct dependencies and cleanup functions in effects.
• Handle asynchronous failures and HTTP error responses.
• Validate external data before rendering or processing it.
• Verify imports, exports, and dependency compatibility.
• Check navigation configuration and route parameters.
• Use React Native DevTools and native debugging tools appropriately.
• Read complete stack traces and investigate root causes.
• Write regression tests for important fixes.
• Test important workflows on both Android and iOS.
• Avoid logging secrets or sensitive user data.

24. Conclusion

Understanding common JavaScript and React Native errors is essential for building reliable mobile applications. Problems can arise from incorrect syntax, undefined values, invalid component rendering, Hook misuse, state management, asynchronous requests, navigation, package compatibility, and native platform configuration.

Effective debugging begins with understanding the error message, locating the failing operation, tracing the root cause, and applying a focused fix. React Native DevTools, LogBox, console logging, breakpoints, Android Studio, and Xcode each provide useful capabilities for investigating different types of failures.

Preventive practices such as validating data, using TypeScript, following React Hooks rules, managing asynchronous operations, writing automated tests, and checking platform-specific behavior can reduce recurring errors and improve application quality.

Explore React Native Training: View the React Native Training Course at JustAcademy

Register for a Demo: Register for a Course Demo

Visit JustAcademy: Explore JustAcademy Courses